/* eslint-disable */
import React from 'react';
import Chart from 'echarts-for-react';
import { Radio } from 'antd';
import request from '../../../utils/request';
// import {dailySoilRestoration} from '../../../services/cockpit';
// const bar1 = 'image://'+require('../../../assets/bar1.png');
const RadioGroup = Radio.Group;

var dataBJ = [
    [1,55,9,56,0.46,18,6,"良"],
    [2,25,11,21,0.65,34,9,"优"],
    [3,56,7,63,0.3,14,5,"良"],
    [4,33,7,29,0.33,16,6,"优"],
    [5,42,24,44,0.76,40,16,"优"],

];


// var schema = [
//     {name: 'date', index: 0, text: '日期'},
//     {name: 'SO2折算浓度', index: 1, text: 'SO2折算浓度'},
//     {name: 'NOX折算浓度', index: 2, text: 'NOX折算浓度'},
//     {name: 'HCL浓度', index: 3, text: 'HCL浓度'},
//     {name: 'CO含量', index: 4, text: ' CO含量'},
// ];

var lineStyle = {
    normal: {
        width: 1,
        // opacity: 0.5,
        color:'#70D7FF'
    }
};


class Myhbzbpf extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value:1,
            dataList: '',
            data:[],
            schema:[
                {name: 'date', index: 0, text: '日期'},
                {name: 'SO2折算浓度', index: 1, text: 'SO2折算浓度'},
                {name: 'NOX折算浓度', index: 2, text: 'NOX折算浓度'},
                {name: 'HCL浓度', index: 3, text: 'HCL浓度'},
                {name: 'CO含量', index: 4, text: ' CO含量'},
            ]
        };
    }

    componentDidMount() {
        this.shljqy(1)

    }

    shljqy = (type) => {
        request({
            url: `/sx-client/sx/onepic/hbzb?type=${type}`,
            method: 'GET',
          }).then(data => {
            if(data.rc === 0) {
                this.setState({
                    // xAixs:data.ret.xAixs,
                    data:data.ret.data,
                    schema:data.ret.schema,
                })
            }
          })
    }

    onChange = (e) => {
        this.setState({
            value:e.target.value
        })
        this.shljqy(e.target.value)

    };
    setOption = () => {
        let myOption;
        const {schema} = this.state
        // let data = this.state.dataList;
        myOption = {
            // backgroundColor: '#333',
        
            tooltip: {
                // padding: 10,
        
                borderWidth: 1,
                formatter: function (obj) {
                    var value = obj[0].value;
                    return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                        + obj[0].seriesName + ' ' + value[0] + '日期：'
                        + value[7]
                        + '</div>'
                        + schema[1].text + '：' + value[1] + '<br>'
                        + schema[2].text + '：' + value[2] + '<br>'
                        + schema[3].text + '：' + value[3] + '<br>'
                        + schema[4].text + '：' + value[4] + '<br>'
                        + schema[5].text + '：' + value[5] + '<br>'
                        + schema[6].text + '：' + value[6] + '<br>';
                }
            },
            // dataZoom: {
            //     show: true,
            //     orient: 'vertical',
            //     parallelAxisIndex: [0]
            // },
            parallelAxis: [
                {dim: 0, name: schema[0].text, inverse: true, max: 31, nameLocation: 'start'},
                {dim: 1, name: schema[1].text},
                {dim: 2, name: schema[2].text},
                {dim: 3, name: schema[3].text},
                {dim: 4, name: schema[4].text},
                
            ],
            // visualMap: {
            //     show: true,
            //     min: 0,
            //     max: 250,
            //     right: 20, 
            //     bottom: 30,
            //     dimension: 2,
            //     calculable: true, 
            //     inRange: {
            //         color: ['#d94e5d','#eac736','#50a3ba'].reverse()
            //     },
            //     text: ['PM 2.5', ''],
            //     textGap: 20,
            //     textStyle: {
            //         color: '#fff'
            //     }
            // },
            parallel: {
                left: '5%',
                right: '18%',
                bottom: 10,
                parallelAxisDefault: {
                    type: 'value',
                    name: 'AQI指数',
                    nameLocation: 'end',
                    nameGap: 20,
                    nameTextStyle: {
                        color: '#fff',
                        fontSize: 12
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#aaa'
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#777'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }
            },
            series: [
                {
                    name: '北京',
                    type: 'parallel',
                    lineStyle: lineStyle,
                    data: this.state.data
                },
        
            ]
        };
        return myOption;
    };
    render() {
        let width = document.body.clientWidth;
        let tableHeight = 250;
        if (width < 1367) {
            tableHeight = 180;
        }
        return (
            <div>
                <div style={{position: 'absolute'}}>
                    <RadioGroup onChange={this.onChange} value={this.state.value}>
                        <Radio value={1}><span style={{color:'#fff'}}>清能环保</span></Radio>
                        <Radio value={2}><span style={{color:'#fff'}}>再生能源</span></Radio>
                        <Radio value={3}><span style={{color:'#fff'}}>维尔利</span></Radio>
                        {/* <Radio value={4}><span style={{color:'#fff'}}>六个月</span></Radio> */}
                    </RadioGroup>
                </div>
                <Chart
                    option={this.setOption()}
                    notMerge
                    lazyUpdate
                    style={{ height: tableHeight }}
                />
            </div>
        )
    }
}
export default Myhbzbpf;
